import React from 'react';
import { Modal, Descriptions, Button, Tag, Image, Space } from 'antd';
import { useTranslation } from 'react-i18next';
import type { CardHolder } from '@/types/holder';

/**
 * 查看持卡人模态框组件属性接口
 * 定义组件接收的props类型
 */
interface ViewCardHolderProps {
  visible: boolean; // 模态框是否可见
  onCancel: () => void; // 取消回调函数
  holder?: CardHolder; // 持卡人数据，可选
}

/**
 * 查看持卡人组件
 * 用于展示持卡人详细信息的模态框
 * @param props 组件属性
 * @returns React组件
 */
const ViewCardHolder: React.FC<ViewCardHolderProps> = ({
  visible,
  onCancel,
  holder
}) => {
  const { t } = useTranslation(); // 国际化翻译函数

  // 如果没有持卡人数据，返回null不渲染
  if (!holder) {
    return null;
  }

  return (
    <Modal
      title={t('cardHolder.viewTitle')} // 模态框标题，使用国际化
      open={visible} // 控制模态框显示
      onCancel={onCancel} // 取消回调
      footer={[
        <Button key="close" onClick={onCancel}>
          {t('common.close')} {/* 关闭按钮，使用国际化 */}
        </Button>
      ]}
      width={700} // 模态框宽度
    >
      {/* Ant Design描述列表组件，显示持卡人详细信息 */}
      <Descriptions column={2} bordered> {/* 两列布局，有边框 */}
        {/* 用户ID */}
        <Descriptions.Item label={t('holder_list.table.user_id')} span={2}>
          {holder.cardholder_json.cardholderId} {/* 显示持卡人ID */}
        </Descriptions.Item>
        
        {/* 姓名 */}
        <Descriptions.Item label={t('holder_list.table.name')}>
          {holder.name} {/* 显示持卡人姓名 */}
        </Descriptions.Item>
        
        {/* 姓名缩写 */}
        <Descriptions.Item label={t('holder_list.table.initials')}>
          {holder.cardholder_json.cardholderNameAbbreviation} {/* 显示姓名缩写 */}
        </Descriptions.Item>
        
        {/* 出生日期 */}
        <Descriptions.Item label={t('holder_list.table.date_of_birth')}>
          {holder.cardholder_json.dateOfBirth || t('common.notSet')} {/* 显示出生日期，如果没有则显示"未设置" */}
        </Descriptions.Item>
        
        {/* 邮箱 */}
        <Descriptions.Item label={t('holder_list.table.email')}>
          {holder.cardholder_json.email || t('common.notSet')} {/* 显示邮箱，如果没有则显示"未设置" */}
        </Descriptions.Item>
        
        {/* 国籍 */}
        <Descriptions.Item label={t('holder_list.table.nationality')}>
          <Space>
            {/* 国旗图标 */}
            <Image
              width={20}
              src={`https://wallex2.oss-cn-hangzhou.aliyuncs.com/asset/images/flags/${holder.cardholder_json.nationalityCountryCode?.toLowerCase()}.png`}
              alt={holder.cardholder_json.nationalityCountryCode}
              preview={false} // 禁止预览
            />
            <span>{holder.cardholder_json.nationalityCountryCode}</span> {/* 显示国家代码 */}
          </Space>
        </Descriptions.Item>
        
        {/* 手机号 */}
        <Descriptions.Item label={t('holder_list.table.mobile_number')}>
          {holder.cardholder_json.mobilePrefix && holder.cardholder_json.mobile
            ? `${holder.cardholder_json.mobilePrefix}-${holder.cardholder_json.mobile}` // 拼接手机号前缀和号码
            : t('common.notSet')} {/* 如果没有则显示"未设置" */}
        </Descriptions.Item>
        
        {/* 账单州/省 */}
        <Descriptions.Item label={t('holder_list.table.billing_state')}>
          {holder.cardholder_json.residentialState || t('common.notSet')} {/* 显示居住州，如果没有则显示"未设置" */}
        </Descriptions.Item>
        
        {/* 状态 */}
        <Descriptions.Item label={t('common.status')}>
          <Tag color={holder.cardholder_json.status === 'active' ? 'green' : 'red'}> {/* 根据状态显示不同颜色 */}
            {t(`cardHolder.status.${holder.cardholder_json.status}`)} {/* 显示状态文本，使用国际化 */}
          </Tag>
        </Descriptions.Item>
        
        {/* 创建时间 */}
        <Descriptions.Item label={t('common.createTime')}>
          {holder.createTime} {/* 显示创建时间 */}
        </Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};

export default ViewCardHolder; // 导出组件